<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Webpixels">
    <title>Quick – Website UI Kit (FREE)</title>
    <!-- Preloader -->
    <style>
        @keyframes hidePreloader {
            0% {
                width: 100%;
                height: 100%;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        body>div.preloader {
            position: fixed;
            background: white;
            width: 100%;
            height: 100%;
            z-index: 1071;
            opacity: 0;
            transition: opacity .5s ease;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body:not(.loaded)>div.preloader {
            opacity: 1;
        }

        body:not(.loaded) {
            overflow: hidden;
        }

        body.loaded>div.preloader {
            animation: hidePreloader .5s linear .5s forwards;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                document.querySelector('body').classList.add('loaded');
            }, 300);
        });
    </script>
    <!-- Favicon -->
    <link rel="icon" href="/images/brand/favicon.png" type="image/png"><!-- Font Awesome -->
    <link rel="stylesheet" href="/css/all.min.css">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="/css/quick-website.css" id="stylesheet">
</head>

<body>
<div class="modal fade" tabindex="-1" role="dialog" id="modal-cookies" data-backdrop="false" aria-labelledby="modal-cookies" aria-hidden="true">
    <div class="modal-dialog modal-dialog-aside left-4 right-4 bottom-4">
        <div class="modal-content bg-dark-dark">
            <div class="modal-body">
                <!-- Text -->
                <p class="text-sm text-white mb-3">
                    We use cookies so that our themes work for you. By using our website, you agree to our use of cookies.
                </p>
                <!-- Buttons -->
                <a href="pages/utility/terms.html" class="btn btn-sm btn-white" target="_blank">Learn more</a>
                <button type="button" class="btn btn-sm btn-primary mr-2" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
<!-- Main content -->
<section>
    <div class="container d-flex flex-column">
        <div class="row align-items-center justify-content-center min-vh-100">
            <div class="col-md-6 col-lg-5 col-xl-5 py-6 py-md-0">
                <div class="card shadow zindex-100 mb-0">
                    <div class="card-body px-md-5 py-5">
                        <div class="mb-5">
                            <h6 class="h3">注册</h6>
                            <p class="text-muted mb-0">欢迎您使用工业管理系统</p>
                        </div>
                        <span class="clearfix"></span>
                        <form id="register_from" method="post">
                            <div class="form-group">
                                <label class="form-control-label">用户名</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i data-feather="user"></i></span>
                                    </div>
                                    <input type="email" class="form-control" id="username" name="username" placeholder="用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">邮箱</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i data-feather="user"></i></span>
                                    </div>
                                    <input type="text" class="form-control" id="email" name="email" placeholder="邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">电话</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i data-feather="user"></i></span>
                                    </div>
                                    <input type="text" class="form-control" id="phone" name="phone" placeholder="电话">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">性别</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i data-feather="user"></i></span>
                                    </div>
                                    <input type="text" class="form-control" id="sex" name="sexInput" placeholder="性别" oninput="updateSexValue()">
                                    <input type="hidden" id="sexValue" name="sex">
                                </div>
                            </div>
                            <div class="form-group mb-0">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <label class="form-control-label">密码</label>
                                    </div>
                                    <div class="mb-2">
                                        <a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
                                    </div>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i data-feather="key"></i></span>
                                    </div>
                                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                                </div>
                            </div>
                            <div class="mt-4">
                                <button type="button" class="btn btn-block btn-primary" id="register_submit">注册</button></div>
                        </form>
                    </div>
                    <div class="card-footer px-md-5"><small>Not registered?</small>
                        <a href="#" class="small font-weight-bold">Create account</a></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Core JS  -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/svg-injector.min.js"></script>
<script src="/js/feather.min.js"></script>
<!-- Quick JS -->
<script src="/js/quick-website.js"></script>
<!-- Feather Icons -->
<script>
    feather.replace({
        'width': '1em',
        'height': '1em'
    })
</script>
<script>
    function updateSexValue() {
        var sexInput = document.getElementById('sexInput').value.trim().toLowerCase();
        var sexValue = document.getElementById('sexValue');

        if (sexInput === '男') {
            sexValue.value = '1';
        } else if (sexInput === '女') {
            sexValue.value = '0';
        } else {
            // 如果输入的不是“男”或“女”，可以选择将值设置为空或其他逻辑
            sexValue.value = '';
        }
    }

    $("#register_submit").click(function (){
        var data = $("#register_from").serialize();
        $.ajax({
            url:'system/register',
            type: 'POST',
            data:data,
            success:function (response){
                if (response.code === "0"){
                    alert("注册成功，返回登录页面")
                    window.location.href = '/login.html'
                }else {
                    alert(response.message)
                }
            },
            error:function(response){
                alert('网络错误!');
            }
        })
    })
</script>
</body>

</html>